1. 什麼是元素顯示模式

元素顯示模式就是元素(標籤)以什麼方式進行顯示

作用 : 網頁的標籤非常多，了解他們的特點可以更方便的布局網頁

ex : <div>自己佔一行，<span>一行可以放多個

2.元素顯示模式的分類

HTML元素一般分為塊元素和行內元素

塊元素:

常見的塊元素有<h1>~<h6>. <p>. <div> . <ul> <ol> <li>等

其中<div>為最典型的塊元素

**特點 : **

a. 自己獨佔一行
b. 高度、寬度、外邊距以及內邊距都可以控制
c. 寬度默認是容器(父級寬度)的100%
d. 是一個容器及盒子，裡面可以放行內或塊級元素

注意 :

文字類的元素內不能使用塊級元素

<p>標籤主要用於存放文字，因此<p>裡不能放塊級元素 特別是不能放<div>

同理<h1>~<h6>裡面也不能放其他塊級元素

行內元素:

常見的行內元素有<a> <strong> <b> <em> <i> <del> <span>等等

其中<span>為最典型的行內元素

特點 :

a. 相鄰行內元素在一行上，一行可顯示多個
b. 高、寬直接設置是無效的
c. 默認寬度就是本身內容的寬度
d. 行內元素只可容納文本或其他行內元素

注意:

連接裡面不可再放連接

特殊情況連結<a>內可以放塊級元素，但要給<a>轉換塊級模式最安全

**行內塊元素 : **

<img>、<input >、<td>等同時具有塊元素和行內元素的特點

所以稱之為行內塊元素

特點 :

a. 和相鄰行內元素(行內塊)在一行上，但是他們之間會有空白縫隙，一行可以顯示多個(行內元素特點)
b. 默認寬度就是他本身內容的寬度(行內元素特點)
c. 高度 行高 外邊距 以及內邊距都可以控制(塊元素特點)

3.元素顯示模式的轉換

特殊情況下需要進行元素模式的轉換

簡單理解 : 一個模式的元素需要另外一種模式的特性

EX : 想要增加連接<a>的觸發範圍

轉換為塊元素: display:block;
轉換為行內元素: display:inline;
轉換為行內塊元素: display:inline-block;